<template>
    <div class="page_content">
        <!--        <ul class="append-menu">
                    <li @click="clickAllExpand()"><i class="iconfont icon-ai"></i></li>
                    <li @click="AllAbilityAnalysis"><i class="iconfont icon-association"></i></li>
                </ul>-->
        <!-- <leftMenu></leftMenu> -->
        <!-- <append-menu v-bind:list="{pointObj: pointObj, map: map, publicLayer: publicLayer, mainPage: this.$store.state.mainPage, abilityAnalysisShow: abilityAnalysisShow, rightModalShow: rightModalShow}"  @AllHeightChange="AllHeightChange" @closeAbilityAnalysis="closeAbilityAnalysis"></append-menu> -->
        <!-- <tab :btns="btns" @tabControl="tabControl"></tab> -->
        <!-- 工具栏 start -->
        <div class="toolsBar">
            <div class="toolsBar_content">
                <ul>
                    <li v-for="(item,i) in toolslist" :key="i+'1'" :title="item.name"
                        :class="item.id==1?btns.list.open?'active_is':'':isLengda?'active_is':''"
                        @click="handleTool(item.id)">
                        <i :class="item.icon"></i>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 工具栏 end -->

        <!-- 左侧树 start -->
        <transition name="slide-fade">
            <div class="left_item" v-show="btns.list.open">
                <country-list :list="countryList" @chooseMap="chooseMap" @zTreeClick="zTreeClick"
                    @showTreeModal="showTreeModal" @transferPosition="transferPosition" ref="countryListObj"
                    :closeModal="closeModal"></country-list>
            </div>
        </transition>
        <!-- 左侧树 end -->
        <!-- 图标管理 start -->
        <transition name="slide-fade">
            <div id="IconPop" v-show="isShowIcon">
                <selectorIcon :IconseTting="IconseTting" @closePopup="closePopup" @replaceIcon="replaceIcon">
                </selectorIcon>
            </div>
        </transition>
        <!-- 图标管理 end -->
        <!-- 模型树 start -->
        <transition name="el-zoom-in-top">
            <div id="ModelPop" v-show="isShowIModel">
                <!-- <i id="left-arrowTip" class="el-icon-caret-left"></i> -->
                <ModelTree @closePopup="closePopup" :IconseTting="IconseTting" />
            </div>
        </transition>
        <!-- 模型树 end -->

        <!-- 图例 start -->
        <!-- <div id="lengda_on" v-show="isLengda">
            <div v-for="(value, key, index) of selectedState" :key="index" class="lengda_on_row">
                <svg class="icon iclose" aria-hidden="true" style="cursor: pointer; width: 80px; height: 60px">
                    <use :xlink:href="'#' + value.iconName"></use>
                </svg>
                <span>{{ key }}</span>
            </div>
        </div> -->
        <!-- 图例 end -->

        <div class="right_item" v-show="btns.events.open || btns.status.open">
            <transition name="slide-fade">
                <real-time-event :realTimeEvent="realTimeEvent" v-show="btns.events.open" :closeModal="closeModal">
                </real-time-event>
            </transition>
            <transition name="slide-fade">
                <real-time-status :realTimeStatus="realTimeStatus" v-show="btns.status.open" :closeModal="closeModal">
                </real-time-status>
            </transition>
        </div>
        <transition name="slide-fade">
            <time-line v-if="btns.timeline.open"></time-line>
        </transition>
        <div id="map"></div>
        <div id="mapModal" v-if="rightModalShow">
            <div>
                <img src="../../image/relation.png" title="关联分析" @click="openWindow('relation_page')" />
            </div>
            <div>
                <img src="../../image/knowledge.png" title="能力分析" @click="AllAbilityAnalysis"
                    v-if="!abilityAnalysisShow" />
                <img src="../../image/knowledge_red.png" title="能力分析" @click="AllAbilityAnalysis"
                    v-if="abilityAnalysisShow" />
            </div>
            <div>
                <img src="../../image/action_analysis.png" title="行为分析" @click="actionAnalysis()"
                    v-if="!actionAnalysisShow" />
                <img src="../../image/action_analysis_red.png" title="行为分析" @click="actionAnalysis()"
                    v-if="actionAnalysisShow" />
            </div>
            <div>
                <img src="../../image/base_msg.png" title="基本信息" @click="openWindow('detail_message')" />
            </div>
        </div>
        <ability-analysis v-show="abilityAnalysisShow" @AllHeightChange="AllHeightChange"
            @closeAbilityAnalysis="closeAbilityAnalysis"></ability-analysis>
        <!--<ability-analysis @heightChange="AllHeightChange" @closeAbilityAnalysis="closeAbilityAnalysis"></ability-analysis>-->
        <active-analysis @closeActiveAnalysis="closeActiveAnalysis" v-show="actionAnalysisShow"></active-analysis>
        <intention-charge v-show="btns.timeline.open"></intention-charge>
        <div id="treeModal" v-if="treeModal">
            <ul>
                <li @click="paintBangs()">能力分析</li>
                <li>意图研判</li>
            </ul>
        </div>
        <transition name="slide-fade">
            <DetailPop v-show="isResult" :isResult="isResult" :currentNode="currentNode" @closeEcharts="closeEcharts">
            </DetailPop>
        </transition>
    </div>
</template>

<script>
    import "./mainPage.less";
    import "./../../../globle/js/animate/animate.min.css";
    import Tab from "./tab/tab";
    import CountryList from "./countryList/countryList";
    // import ShipList from './shipList/shipList';
    import RealTimeEvent from "./realTimeEvent/realTimeEvent";
    import RealTimeStatus from "./realTimeStatus/realTimeStatus";
    import AbilityAnalysis from "./abilityAnalysis/abilityAnalysis";
    import ActiveAnalysis from "./activeAnalysis/activeAnalysis";
    import IntentionCharge from "./intentionCharge/intentionCharge";
    import "./../../../globle/js/flyLine/flyLine";
    import leftMenu from "./leftmenu/leftMenu";
    // import appendMenu from "./appendMenu/appendMenu";
    import storeData from "./../../tools/vuex-store";
    import DetailPop from "./PopUP/index.vue";
    import selectorIcon from "./IconsGather/selectorIcon.vue";
    import ModelTree from "./ModelTree/index.vue";

    export default {
        name: "app",
        components: {
            Tab,
            CountryList,
            // ShipList,
            RealTimeEvent,
            // appendMenu,
            leftMenu,
            RealTimeStatus,
            AbilityAnalysis,
            ActiveAnalysis,
            IntentionCharge,
            DetailPop,
            TimeLine: (resolve) => {
                require(["./timeLine/timeLine"], resolve);
            },
            selectorIcon,
            ModelTree,
        },
        data() {
            return {
                env: process.env.NODE_ENV,
                map: {},
                treeModal: false,
                tree: {},
                slider: {},
                checkItem: [],
                isLengda: false, //图标显示
                rightModalShow: false,
                abilityAnalysisShow: false,
                actionAnalysisShow: false,
                toolslist: [{
                    id: 1,
                    icon: 'el-icon-menu',
                    name: '国家树'
                }, {
                    id: 2,
                    icon: 'el-icon-orange',
                    name: '图例'
                }], //工具管理
                btns: {
                    list: {
                        open: true,
                    },
                    events: {
                        open: false,
                    },
                    status: {
                        open: false,
                    },
                    knowledge: {
                        open: false,
                    },
                    timeline: {
                        open: false,
                    },
                    situation: {
                        open: true,
                    },
                    connection: {
                        open: false,
                    },
                    perception: {
                        open: false,
                    },
                    need: {
                        open: false,
                    },
                    intelligence: {
                        open: false,
                    },
                },
                countryList: [{
                        name: "世界",
                        val: "world"
                    },
                    {
                        name: "中国",
                        val: "china"
                    },
                    {
                        name: "日本",
                        val: "japan"
                    },
                    {
                        name: "美国"
                    },
                    {
                        name: "台湾"
                    },
                    {
                        name: "越南"
                    },
                    {
                        name: "印度"
                    },
                    {
                        name: "欧洲"
                    },
                    {
                        name: "叙利亚"
                    },
                ],
                mainMap: null,
                realTimeStatus: [{
                        item: "xxx机场",
                        name: "飞机起飞",
                        status: "正常"
                    },
                    {
                        item: "xxx机场",
                        name: "飞机起飞",
                        status: "故障"
                    },
                    {
                        item: "xxx机场",
                        name: "飞机起飞",
                        status: "正常"
                    },
                    {
                        item: "xxx机场",
                        name: "飞机起飞",
                        status: "警报"
                    },
                    {
                        item: "xxx机场",
                        name: "飞机起飞",
                        status: "正常"
                    },
                ],
                realTimeEvent: [{
                        name: "事件11111",
                        status: "88"
                    },
                    {
                        name: "事件1111",
                        status: "90"
                    },
                    {
                        name: "事件111111",
                        status: "80"
                    },
                    {
                        name: "事件11111",
                        status: "85"
                    },
                    {
                        name: "事件111111",
                        status: "60"
                    },
                ],
                charts: {},
                mapChart: {},
                point: [],
                legend: null,
                pointRange: [],
                pointObj: {},
                activeMsg: "",
                position: {},
                publicLayer: {},
                rightCheckedNode: {},
                // 能力分析编号
                abilityNum: null,
                isResult: false,
                currentNode: {}, //点击视图上的点
                isShowIcon: false, //控制图标选择弹框
                isShowIModel: false, //控制模型树选择弹框
                IconseTting: {}, //图标选择弹框的设置
                selectedState: {}, //已经选择的区域
            };
        },
        mounted() {
            this.drawMap();
            $(".left_item").draggable({
                handle: ".main_title"
            });
            $(".real_time_event").draggable({
                handle: ".real_time_title"
            });
            $("#active_analysis").draggable({
                handle: ".action_title"
            });
            $("#charge").draggable({
                handle: ".action_title"
            });
            $("#ability_analysis").draggable({
                handle: ".ability_tlt"
            });
            // this.webSocketServer();

            let attr = (function () {
                let url = window.location.href;
                url = url.substring(url.lastIndexOf("ids=") + 4, url.length);
                return url.substring(0, url.lastIndexOf("&t="));
            })();
            attr = attr.split(",");
            storeData.state.serialNumber = attr;
            if (!isNaN(parseInt(attr[0]))) {
                this.$store.dispatch("ajax", {
                    url: "api/entityList/queryEntity",
                    method: "post",
                    succeed: (res) => {
                        for (const j in attr) {
                            let nodeAttr = {
                                position: [35.3, 139.6666667],
                                serialNumber: attr[j],
                                checked: true,
                            };
                            for (const i in res) {
                                switch (i) {
                                    case "名称":
                                        nodeAttr["name"] = res[i];
                                        break;
                                }
                            }
                            // window.location.reload();
                            this.chooseMap(Object.assign([], nodeAttr));
                        }
                    },
                });
            }

            // 将创造的节点对象放进全局
            this.$store.state.mainPage = this;

            /* const latlngs = [startP, /!*[sitePosition[0] - 1,[sitePosition[1] - 1]],*!/ endP];
                     var videoUrl = 'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
                         videoBounds = [[sitePosition[0],[sitePosition[1]]], [sitePosition[0] + 4,[sitePosition[1] + 4]]];
                     L.videoOverlay(videoUrl, videoBounds ).addTo(this.map);*/
            // 本地缓存创建图标管理
            localStorage.setItem("IconList", JSON.stringify([]));
        },
        computed: {},
        methods: {
            /* 地图初始 start */
            //初始化图层
            drawMap() {
                let glayerSatelite = new L.TileLayer("/globle/tiles/{z}/{y}/{x}.jpg", {
                    minZoom: 3,
                    maxZoom: 8,
                    attribution: "卫星地图",
                });
                // let glayerSatelite = new L.TileLayer('http://' + '192.168.1.179' + ':9880/tiles2/{z}/{y}/{x}.jpg', {
                //     minZoom: 3,
                //     maxZoom: 8,
                //     attribution: '卫星地图'
                // });
                // let glayerSatelite = new L.TileLayer('http://' + location.hostname + ':8081/{z}/{y}/{x}.jpg', {minZoom: 3, maxZoom: 8, attribution: '卫星地图'});
                let latlng = new L.LatLng(31.198706347135246, 121.4813232421875);
                this.map = new L.Map("map", {
                    center: latlng,
                    zoom: 5,
                    layers: [glayerSatelite],
                    zoomControl: false,
                    Legend: true,
                    attributionControl: false,
                });
                // console.log(this.map);
                // let baseLayers = {
                //     // "普通地图": glayerNormal,
                //     "卫星地图": glayerSatelite
                // };
                // let overlays = {
                //     "混合": glayerSatelite
                // };
                // L.control.layers(baseLayers, {position: 'topright'}).addTo(this.map);
                this.addMapEvents();
                this.addCustomLengda()
            },
            //添加自定义图例
            addCustomLengda() {
                this.isLengda = true;
                $.getJSON('../../../public/surroundings.json').then(res => {
                    console.log(res);
                    // let iconlist = JSON.parse(JSON.stringify(res.rows));
                    let iconlist = res.rows;
                    L.Control.Legend = L.Control.extend({
                        options: {
                            position: 'topright' //初始位置
                        },
                        initialize: function (options) {
                            L.Util.extend(this.options, options);

                        },
                        onAdd: function (map) {
                            //创建一个class为info legend的div
                            let content = L.DomUtil.create('div', 'info legend');
                            //创建一个图片要素
                            var
                                labels = [];
                            for (var i = 0; i < iconlist.length; i++) {
                                labels.push(
                                    `<div class='color' style=''>
                                                  <svg class="icon" aria-hidden="true" style="cursor: pointer; width: 60%; height: 60%">
                                <use xlink:href="#${iconlist[i].roudicon}"></use>
                            </svg>
                                   <span>${iconlist[i].name}</span> </div>`
                                );
                            }
                            content.innerHTML = labels;
                            return content;
                        },
                    });
                    L.control.legend = function (opts) {
                        return new L.Control.Legend(opts);
                    }

                    this.legend = L.control.legend({
                        position: 'bottomright'
                    });
                    //添加图例
                    this.legend.addTo(this.map);
                })

            },
            /* 工具栏 start */
            handleTool(id) {
                if (id === 1) {
                    this.btns.list.open = !this.btns.list.open;
                } else {
                    let legend = document.getElementsByClassName('legend')[0];
                    if (this.isLengda) {
                        legend.style.display = 'none';
                        this.isLengda = false;
                    } else {
                        legend.style.display = 'flex';
                        this.isLengda = true;
                    }
                    this.map.removeLayer(this.legend)
                    console.log(this.map);
                }
            },
            /* 工具栏 end */
            //绘制点
            pointInit(node) {
                console.log(node);
                const $this = this;
                let serialNumber = node.serialNumber.toString();
                // return L.marker(node.position, {
                //   icon: L.divIcon({
                //     iconSize: [34, 34],
                //     iconUrl: "../../../globle/image/icon/point-icon.png",
                //     className: "point-icon",
                //     color: false,
                //   }),
                // })
                //   .addTo(this.map)
                //   .on("click", function (e) {
                //     $this.cleanLinkAttr(node, true);
                //     let originalEvent = e.originalEvent.srcElement;
                //     originalEvent.className.indexOf("clickBtn") === -1
                //       ? ($(originalEvent).addClass("clickBtn"),
                //         $(originalEvent).removeClass("point-icon"))
                //       : ($(originalEvent).removeClass("clickBtn"),
                //         $(originalEvent).addClass("point-icon"));
                //   })
                //   .on("dblclick", function () {
                //     let layer = {};
                //     if ($this.publicLayer[serialNumber] === undefined) {
                //       $this.$store.dispatch("ajax", {
                //         url: "api/entityList/queryEntityStatus",
                //         method: "post",
                //         data: { ids: [serialNumber] },
                //         succeed: (res) => {
                //           const resAttr = res.rows[serialNumber];
                //           if (resAttr.length === 0) return;
                //           let html = '<ul class="map_item">';
                //           for (let i = 0; i < resAttr.length; i++) {
                //             html += `<li>
                //                           <div class="state-text">${
                //                             i + 1 + ". " + resAttr[i]["名称"]
                //                           }
                //                           <div class="state-text-detail">`;
                //             let detailHtml = `<ul>`;
                //             for (const j in resAttr[i]) {
                //               if (j !== "uuid" && j !== "编号") {
                //                 if (j !== "信息来源") {
                //                   detailHtml += `
                //                                             <li class="state-text-list">
                //                                               <span>${j}</span>：${resAttr[i][j]}
                //                                             </li>`;
                //                 } else {
                //                   detailHtml += `
                //                                             <li class="state-text-list">
                //                                               <span>${j}</span>：<a href="${resAttr[i][j]}" target="_blank">${resAttr[i][j]}</a>
                //                                             </li>`;
                //                 }
                //               }
                //             }
                //             detailHtml += `</ul>`;
                //             html += storeData.actions.defaultNzmodatl(
                //               "状态变化详情",
                //               detailHtml,
                //               {
                //                 ps_dialog: {
                //                   height: "312px",
                //                   left: "-400px",
                //                   top: "-373px",
                //                   width: "390px",
                //                 },
                //               }
                //             );
                //             html += `<img src="globle/image/line_img-left.png" alt="" class="line-left" style="float: right"></div>
                //                                   </div>
                //                           </li>`;
                //           }
                //           html += "</ul>";
                //           layer = L.popup({ autoClose: false, closeOnClick: false })
                //             .setLatLng(node.position)
                //             .setContent(html);
                //           $this.map.openPopup(layer);
                //           $this.publicLayer[serialNumber] = layer;
                //         },
                //       });
                //     } else {
                //       $this.map.closePopup($this.publicLayer[serialNumber]);
                //       delete $this.publicLayer[serialNumber];
                //     }
                //   })
                //   .on("contextmenu", () => {
                //     this.abilityNum = "";
                //     this.drawMenu(serialNumber);
                //     this.position = node.position;
                //   });
            },
            //第二类 绘制自定义点
            secondDrawDot(id, iconName, fatherName) {
                const $this = this;
                $.get("../../../public/AmericanTroops.json").then((res) => {
                    console.log(res);
                    let obj = res.rows[id - 1];
                    let point = L.marker(obj.position, {
                            icon: L.icon({
                                iconSize: obj.iconSize,
                                iconUrl: "../../../static/images/" + iconName + ".png",
                                // shadowUrl: "leaf-shadow.png",
                                // shadowSize:[41,41],
                                // className: tes.className,
                                // color: tes.color,
                            }),
                        })
                        .addTo(this.map)
                        //图上标记点击事件
                        .on("click", function (e) {
                            console.log(e);
                            $this.map.panTo({
                                lon: e.latlng.lng,
                                lat: e.latlng.lat
                            });
                            $this.isResult = true;
                            $this.currentNode = obj;
                        });
                    let nodeDetail = {};
                    nodeDetail["serialNumber"] = obj.serialNumber;
                    nodeDetail["position"] = obj["position"];
                    nodeDetail["point"] = point;
                    nodeDetail["名称"] = obj.txt;
                    nodeDetail["地区"] = fatherName;
                    nodeDetail["部队"] = obj.troopsForm;
                    nodeDetail["IconSize"] = obj.iconSize;
                    nodeDetail["Infomation"] = obj;
                    this.pointObj[obj.serialNumber] = nodeDetail;
                    this.showCanvas(iconName, nodeDetail);
                    this.textInit(nodeDetail);
                });
            },
            /* 地图初始 end */
            /* 图表数据弹框 start */
            closeEcharts(val) {
                this.isResult = val;
            },
            /* 图表数据弹框 end */
            tabControl(name, datalinkUrl) {
                this.btns[name].open = !this.btns[name].open;
                const linkAttr = storeData.state.linkAttr;
                if (linkAttr.length === 0 && datalinkUrl !== undefined)
                    return this.$message({
                        showClose: true,
                        message: "地图上没有选中节点！",
                        type: "error",
                    });
                if (datalinkUrl !== undefined)
                    window.open(`${datalinkUrl}?ids=${linkAttr}`, "体系界面");
            },
            // 打开全部节点对象的雷达半径
            AllAbilityAnalysis() {
                let select = false;
                // this.rightModalShow = !rightModalShow;
                for (const i in this.pointObj) {
                    if (i !== "") {
                        select = true;
                    }
                }
                if (select) {
                    this.abilityAnalysisShow = !this.abilityAnalysisShow;
                    this.rightModalShow = !this.rightModalShow;
                } else {
                    this.$message({
                        showClose: true,
                        message: "地图上没有节点！",
                        type: "error",
                    });
                }
            },
            // 绘制全部半径
            AllHeightChange(val) {
                const $this = this;

                let saveProp = [];
                for (const i in this.pointObj) {
                    saveProp.push(this.pointObj[i]["attr"]["serialNumber"]);
                }

                this.$store.dispatch("ajax", {
                    url: "api/entityList/queryDetectionZone",
                    method: "post",
                    data: {
                        ids: saveProp,
                        height: val[0].val,
                        rcs: val[1].val
                    },
                    succeed: (res) => {
                        // console.log(res);
                        for (const i in res.rows) {
                            console.log(i);
                            const rangPosition = this.pointObj[i]["attr"].position;
                            let saveRadius = Math.floor(res.rows[i]);

                            if (isNaN(saveRadius)) {
                                this.$message({
                                    showClose: true,
                                    message: res.rows[i],
                                    type: "error",
                                });
                                return;
                            }

                            if (this.pointObj[i]["range"] === undefined) {
                                if (
                                    this.pointObj[i]["range"] !== undefined &&
                                    this.pointObj[i].range.val !== undefined
                                )
                                    this.pointObj[i].range.val.remove();
                                this.pointObj[i]["range"] = {
                                    val: L.circle(rangPosition, res.rows[i], {
                                            color: "red",
                                            opacity: 0,
                                            fillColor: "#1195fe",
                                            fillOpacity: 0.3,
                                        })
                                        .addTo(this.map)
                                        .on("click", function (e) {
                                            saveRadius =
                                                $this.pointObj[i]["range"] !== undefined ?
                                                $this.pointObj[i]["range"].saveRadius :
                                                saveRadius;
                                            $this.$store.dispatch("ajax", {
                                                url: "api/situation/earlyWarning",
                                                method: "post",
                                                data: {
                                                    radius: saveRadius,
                                                    position: rangPosition
                                                },
                                                succeed: (res2) => {
                                                    let siteName = "";
                                                    for (const j of res2.rows) {
                                                        siteName += `${j} `;
                                                    }
                                                    let htmlStr =
                                                        `<div class="detect-radius">
                                              <p>探测半径 ${Math.floor(
                                                saveRadius
                                              )} 米</p>` +
                                                        `<p>涉及的省县有${siteName}</p>
                                            </div>`;
                                                    $this.pointObj[i]["range"].popup = L
                                                        .popup()
                                                        .setLatLng(rangPosition)
                                                        .setContent(htmlStr)
                                                        .openOn($this.map);
                                                },
                                            });
                                        }),
                                };
                            } else {
                                // 重置绘制半径的范围和显示信息
                                this.pointObj[i].range.val.setRadius(res.rows[i]);
                                /*$this.$store.dispatch('ajax', {
                                                      url: 'api/situation/earlyWarning', method: 'post', data: { radius: saveRadius, position: rangPosition}, succeed: (res2)=> {
                                                          let siteName = '';
                                                          for (const j of res2.rows) {
                                                              siteName += `${j} `;
                                                          }
                                                          let htmlStr =
                                                              `<div class="detect-radius">
                                                                <p>探测半径 ${Math.floor(res.rows[i])} 米</p>` +
                                                              `<p>涉及的省县有${siteName}</p>
                                                              </div>`;
                                                          $this.pointObj[i]['range'].popup.setContent(htmlStr);
                                                      }
                                                  });*/
                                if ($this.pointObj[i]["range"].popup !== undefined)
                                    $this.pointObj[i]["range"].popup.remove();
                            }
                            $this.pointObj[i]["range"].saveRadius = saveRadius;
                        }
                    },
                });
            },
            //节点下文字初始化
            // textInit(node) {
            //   console.log(node)
            //   let serialNumber = node.serialNumber.toString(),
            //     $this = this,
            //     text;
            //   let detailHtml = `<div class="detail_html" data-num="${serialNumber}">`;
            //   detailHtml += `<div class="detail-bgc-content">
            //                         <ul class="detail-bgc">
            //                             <li class="detail-bgc-a"></li>
            //                             <li class="detail-bgc-b"></li>
            //                             <li class="detail-bgc-c"></li>
            //                         </ul>
            //                         <img src="globle/image/detail/bgc/雷达.png" alt="#"></div>`;
            //   let list_i = 0;
            //   let detail_left = `<ul class="detail-left">`;
            //   let detail_right = `<ul class="detail-right">`;
            //   const rows = node;
            //   for (const i in rows) {
            //     // if (i !== 'uuid' && i !== '编号' && i !== 'position' && i !== 'serialNumber') {
            //     if (!["uuid", "编号", "position", "serialNumber"].includes(i)) {
            //       if (list_i < 5) {
            //         detail_left += `<li class="animated fadeInLeft animated-delay"><p title="${rows[i]}">${i}：<span>${rows[i]}</span></p></li>`;
            //       } else {
            //         detail_right += `<li class="animated fadeInRight animated-delay"><p title="${rows[i]}">${i}：<span>${rows[i]}</span></p></li>`;
            //       }
            //       list_i++;
            //     }
            //   }
            //   detail_left += `</ul>`;
            //   detail_right += `</ul>`;
            //   detailHtml += detail_left + detail_right + "</div>";
            //   let testPosition = Object.assign([], node.position);
            //   /*                var popup = L.popup()
            //                                 .setContent(storeData.actions.defaultNzmodatl('基本信息', detailHtml,
            //                                     {
            //                                         ps_dialog: {
            //                                             height: '450px',left: '-334px', top: '-596px', width: '740px', margin: '100px auto'},
            //                                         num: {serialNumber: serialNumber}
            //                                     }));*/
            //   var popup = L.popup().setContent(
            //     storeData.actions.defaultNzmodatl({
            //       title: "基本信息",
            //       html: detailHtml,
            //       parameter: {
            //         height: "450px",
            //         left: "-334px",
            //         top: "-596px",
            //         width: "740px",
            //         margin: "100px auto",
            //       },
            //       serNum: serialNumber,
            //     })
            //   );
            //   text = L.marker(testPosition, {
            //     icon: L.divIcon({
            //       html: node["名称"].toString(),
            //       iconSize: [80, "auto"],
            //       className: "node-text",
            //       iconAnchor: [40, -10],
            //     }),
            //     riseOnHover: true,
            //   })
            //     .addTo(this.map)
            //     .bindPopup(popup, { autoClose: false, closeOnClick: true });

            //   $this.map.panTo(testPosition);
            //   if (this.pointObj[serialNumber].text === undefined)
            //     this.pointObj[serialNumber].text = [];
            //   this.pointObj[serialNumber].text.push(text);
            //   // }
            //   // });
            //   return text;
            // },
            textInitReal(node) {
                let serialNumber = node.serialNumber.toString(),
                    $this = this,
                    text;
                //构建子类
                let detailHtml = `<div class="detail_html" data-num="${serialNumber}">`;
                detailHtml += `<div class="detail-bgc-content_box">`;

                let detail_left = `<ul class="detail-Top">`;
                let detail_top = `<ul class="detail-Top">`;
                // let detail_right = `<ul class="detail-right">`;
                let detail_bottom = `<ul class="detail-bottom">`;
                const rows = node;
                detail_left +=
                    `<li class="animated fadeInLeft animated-delay"><p title="${rows["名称"]}">名称：<span>${rows["名称"]}</span></p></li><li class="animated fadeInLeft animated-delay"><p title="${rows["地区"]}">所属：<span>${rows["地区"]}</span></p></li><li class="animated fadeInLeft animated-delay"><p title="${rows["position"][0]}+','+${rows["position"][1]}">经纬度：<span>${rows["position"]}</span></p></li>`;
                //处理部队详细信息
                let troops = node["部队"].split(";");
                // console.log(troops);
                let troopsReal = [];
                for (const i in troops) {
                    let arg = {};
                    if (troops[i].indexOf(",") > -1 && troops[i] !== "") {
                        let children = troops[i].split(",");
                        arg.title = children[0];
                        arg.children = [];
                        arg.expand = true;
                        for (let i = 1; i < children.length; i++) {
                            let tag = {};

                            if (children[i].indexOf("[") > -1) {
                                tag.title = children[i].substring(0, children[i].indexOf("["));
                                //判断是否在[ ] 中间
                                let chlist = [];
                                tag.children = [];
                                chlist = children[i]
                                    .substring(children[i].indexOf("["), children[i].length)
                                    .split("]");
                                chlist.forEach((t) => {
                                    let atj = {};
                                    if (t.length == 0) {
                                        return;
                                    }
                                    if (t.indexOf("[") > -1) {
                                        atj.title = t.substr(t.indexOf("["), t.length);
                                    } else {
                                        atj.title = t;
                                    }
                                    tag.children.push(atj);
                                });
                                arg.children.push(tag);
                            } else {
                                tag.title = children[i];
                                arg.children.push(tag);
                            }
                        }
                        troopsReal.push(arg);
                    } else if (troops[i].indexOf(",") < 0 && troops[i] !== "") {
                        arg.title = troops[i];
                        arg.expand = false;
                        console.log(troops[i]);
                        troopsReal.push(arg);
                    }
                }
                //添加基本信息
                for (const item of troopsReal) {
                    if (item.children) {
                        detail_bottom +=
                            `<li class="animated fadeInLeft animated-delay"><h3 title="${item.title}">${item.title}</h3><div class="animated fadeInLeft animated-delay" style="padding: 5px 0px 5px 10px;">`;
                        if (item.children) {
                            item.children.forEach((res) => {
                                detail_bottom +=
                                    `<h4 style="width:100%;text-align:left;margin:0 0 5px 0;">${res.title}</h4>`;
                                //第三层
                                if (res.children) {
                                    res.children.forEach((tes) => {
                                        detail_bottom +=
                                            `<h5 style="width:100%;text-align:left;margin:0 0 5px 5px;">${tes.title}</h5>`;
                                    });
                                }
                            });
                        }
                        detail_bottom += `</div></li>`;
                    } else {
                        detail_bottom +=
                            `<li class="animated fadeInLeft animated-delay"><h3 title="${item.title}"><span>${item.title}</span></h3>`;
                        detail_bottom += `</li>`;
                    }
                }
                detail_left += `</ul>`;
                detail_bottom += `</ul>`;
                detailHtml += detail_left + detail_bottom + "</div>";
                let testPosition = Object.assign([], node.position);
                var popup = L.popup().setContent(
                    storeData.actions.defaultNzmodatl({
                        title: "基本信息",
                        html: detailHtml,
                        parameter: {
                            height: "450px",
                            left: "-334px",
                            top: "-570px",
                            width: "740px",
                            margin: "100px auto",
                        },
                        serNum: serialNumber,
                    })
                );
                text = L.marker(testPosition, {
                        icon: L.divIcon({
                            html: node["名称"].toString(),
                            iconSize: [80, "auto"],
                            className: "node-text",
                            iconAnchor: [40, -20],
                        }),
                        riseOnHover: true,
                    })
                    .addTo(this.map)
                    .bindPopup(popup, {
                        autoClose: false,
                        closeOnClick: true
                    });

                $this.map.panTo(testPosition);
                if (this.pointObj[serialNumber].text === undefined)
                    this.pointObj[serialNumber].text = [];
                this.pointObj[serialNumber].text.push(text);
                return text;
            },
            textInit(node) {
                console.log(node);
                let serialNumber = node.serialNumber.toString(),
                    $this = this,
                    text;
                let detailHtml = `<div class="detail_html" data-num="${serialNumber}">`;
                detailHtml += `<div class="detail-bgc-content">
                            <ul class="detail-bgc">
                                <li class="detail-bgc-a"></li>
                                <li class="detail-bgc-b"></li>
                                <li class="detail-bgc-c"></li>
                            </ul>
                            <img src="globle/image/detail/bgc/雷达.png" alt="#"></div>`;
                let list_i = 0;
                let detail_left = `<ul class="detail-left">`;
                let detail_right = `<ul class="detail-right">`;
                const rows = node;
                for (const i in rows) {
                    console.log(i);
                    // if (i !== 'uuid' && i !== '编号' && i !== 'position' && i !== 'serialNumber') {
                    if (!["uuid", "编号", "position", "serialNumber", "部队"].includes(i)) {
                        if (list_i < 5) {
                            detail_left +=
                                `<li class="animated fadeInLeft animated-delay"><p title="${rows[i]}">${i}：<span>${rows[i]}</span></p></li>`;
                        } else {
                            detail_right +=
                                `<li class="animated fadeInRight animated-delay"><p title="${rows[i]}">${i}：<span>${rows[i]}</span></p></li>`;
                        }
                        list_i++;
                    } else if (["部队"].includes(i)) {
                        console.log(rows[i]);
                        for (const item of rows[i]) {
                            if (list_i < 2) {
                                detail_left +=
                                    `<li class="animated fadeInLeft animated-delay"><p title="${item.name}"><span>${item.name}</span></p></li><li class="animated fadeInLeft animated-delay" style="padding: 10px 20px 5px 0px;"><h3 style="width:100%;text-align:left;margin:0 0 5px 0;">${item.children[0].name}</h3>`;
                                if (item.children[0].list) {
                                    for (let ant of item.children[0].list) {
                                        detail_left += `<p class="animated fadeInLeft animated-delay">&nbsp;${ant}</p>`;
                                    }
                                }
                                detail_left += `</li>`;
                            } else if (list_i == 2) {
                                detail_left += `<li class="animated fadeInLeft animated-delay"><p title="${item.name}"><span>${item.name}</span></p></li><li class="animated fadeInLeft animated-delay" style="    position: absolute;
    bottom: -98px;"><h3 style="width:100%;text-align:left;margin:0 0 5px 0;">${item.children[0].name}</h3>`;
                                if (item.children[0].list) {
                                    for (let ant of item.children[0].list) {
                                        detail_left +=
                                            `<p class="animated fadeInLeft animated-delay" style="max-width:300px;">&nbsp;${ant}</p>`;
                                    }
                                }
                                detail_left += `</li>`;
                            } else {
                                detail_right += `<li class="animated fadeInLeft animated-delay"><p title="${item.name}"><span>${item.name}</span></p></li><li class="animated fadeInLeft animated-delay" style="padding: 10px 20px 5px 0px;"><h3 title="${item.children[0].name}" style="max-width:200px;text-overflow: ellipsis;
    overflow: hidden;text-align:left;margin:0 0 5px 0;">${item.children[0].name}</h3>`;
                                if (item.children[0].list) {
                                    for (let ant of item.children[0].list) {
                                        detail_right +=
                                            `<p class="animated fadeInLeft animated-delay">&nbsp;${ant}</p>`;
                                    }
                                }

                                detail_right += `</li>`;
                            }
                            list_i++;
                        }
                    }
                }
                detail_left += `</ul>`;
                detail_right += `</ul>`;
                detailHtml += detail_left + detail_right + "</div>";
                let testPosition = Object.assign([], node.position);
                /*                var popup = L.popup()
                                              .setContent(storeData.actions.defaultNzmodatl('基本信息', detailHtml,
                                                  {
                                                      ps_dialog: {
                                                          height: '450px',left: '-334px', top: '-596px', width: '740px', margin: '100px auto'},
                                                      num: {serialNumber: serialNumber}
                                                  }));*/
                var popup = L.popup().setContent(
                    storeData.actions.defaultNzmodatl({
                        title: "基本信息",
                        html: detailHtml,
                        parameter: {
                            height: "450px",
                            left: "-334px",
                            top: "-596px",
                            width: "740px",
                            margin: "100px auto",
                        },
                        serNum: serialNumber,
                    })
                );
                text = L.marker(testPosition, {
                        icon: L.divIcon({
                            html: node["名称"].toString(),
                            iconSize: [80, "auto"],
                            className: "node-text",
                            iconAnchor: [40, -20],
                        }),
                        riseOnHover: true,
                    })
                    .addTo(this.map)
                    .bindPopup(popup, {
                        autoClose: false,
                        closeOnClick: true
                    });

                $this.map.panTo(testPosition);
                if (this.pointObj[serialNumber].text === undefined)
                    this.pointObj[serialNumber].text = [];
                this.pointObj[serialNumber].text.push(text);

                return text;
            },
            //图标点击切换事件
            transferPosition(e, node, type) {
                if (type == "icon") {
                    this.isShowIcon = true;
                    let Xais = e.clientX + 200;
                    let Yais = e.target.offsetTop + 32;
                    // let Yais = e.clientY;
                    // $("#IconPop").offset({ top: Yais });
                    // $("#IconPop").offset({ top: Yais, left: Xais });
                    this.IconseTting = node;
                } else {
                    this.isShowIModel = true;
                    // let Xais = e.clientX + 100;
                    // let Yais = e.clientY;
                    let parentTop = $(".left_item")[0].offsetTop;
                    let Xais = e.target.offsetLeft;
                    // let Xais = e.target.offsetLeft+e.target.offsetWidth;
                    let Yais = e.target.offsetTop + 32;
                    // let Yais = e.target.offsetTop+32+ e.target.offsetHeight+parentTop;
                    $("#left-arrowTip").css({
                        top: Yais
                    });

                    let info = {};
                    info.name = node.name;
                    info.id = node.id;
                    info.e = e;
                    info.node = node;
                    this.IconseTting = info;
                }
            },
            //关闭图标弹框
            closePopup(type) {
                if (type == "icon") {
                    // $("#IconPop").offset({ top: 0, left: 0 });
                    this.isShowIcon = false;
                } else {
                    this.isShowIModel = false;
                }
            },
            //替换地图上图标
            replaceIcon(iName, node) {
                this.IconseTting.roudicon = iName;
                if (!node.children) {
                    return;
                }
                node.children.forEach((res) => {
                    if (this.pointObj[res.serialNumber]) {
                        console.log(this.pointObj[res.serialNumber]);
                        let marker = this.pointObj[res.serialNumber];
                        this.map.removeLayer(marker.point);
                        //替换图层
                        console.log(marker);
                        let point = L.marker(marker.position, {
                                icon: L.icon({
                                    iconSize: marker.IconSize,
                                    iconUrl: "../../../static/images/" + iName + ".png",
                                }),
                            })
                            .addTo(this.map)
                            //图上标记点击事件
                            .on("click", function (e) {
                                $this.map.panTo({
                                    lon: e.latlng.lng,
                                    lat: e.latlng.lat
                                });
                                $this.isResult = true;
                                $this.currentNode = marker.Infomation;
                            });
                        let nodeDetail = {};
                        nodeDetail["serialNumber"] = res.serialNumber;
                        nodeDetail["position"] = marker.position;
                        nodeDetail["point"] = point;
                        nodeDetail["名称"] = marker.Infomation.txt;
                        nodeDetail["部队"] = marker.Infomation.troopsForm;
                        nodeDetail["IconSize"] = marker.IconSize;
                        nodeDetail["Infomation"] = marker.Infomation;
                        this.pointObj[res.serialNumber] = nodeDetail;
                    }
                });
            },
            //展示图例
            showCanvas(iconName, nodeDetail) {
                //判断是否为空
                if (JSON.stringify(this.selectedState) == "{}") {
                    let arg = {};
                    arg["state"] = nodeDetail["名称"];
                    arg["iconName"] = iconName;
                    this.selectedState[nodeDetail["地区"]] = arg;
                    this.checkItem.push(nodeDetail["地区"]);
                } else {
                    //每次勾选判断是否有这个地区
                    if (!this.selectedState.hasOwnProperty(nodeDetail["地区"])) {
                        let arg = {};
                        arg["state"] = nodeDetail["名称"];
                        arg["iconName"] = iconName;
                        this.selectedState[nodeDetail["地区"]] = arg;
                        this.selectedState[nodeDetail["地区"]] = arg;
                        this.checkItem.push(nodeDetail["地区"]);
                    }
                }
                console.log(this.selectedState);
            },
            // 删除弹窗
            deletePopup(serNum) {
                if (serNum === 0) {
                    this.btns.list.open = false;
                } else {
                    let
                        textObj /* = this.pointObj[serNum].text !== undefined ? this.pointObj[serNum].text[0] : return*/ ;
                    if (this.pointObj[serNum].text !== undefined) {
                        textObj = this.pointObj[serNum].text[0];
                    } else {
                        return;
                    }
                    textObj.closePopup();
                }
            },
            // 点击添加或者删除节点数组
            cleanLinkAttr(node, option) {
                const linkAttr = storeData.state.linkAttr;
                const id = String(node["serialNumber"]);
                if (linkAttr.indexOf(id) === -1) {
                    if (option) linkAttr.push(id);
                } else {
                    linkAttr.splice(linkAttr.indexOf(id), 1);
                }
            },
            // ztree数组点击事件 --复选框勾选事件
            chooseMap(node) {
                console.log(node);
                /*                console.log(this.$router,555);
                                          let newRoutes = [{ path: '/detail_message2', component: resolve => require(['../../components/detail_message/detailMessage'], resolve) }];
                                          this.$router.addRoutes(newRoutes);
                                          console.log(this.$router,888);*/

                let serialNumber = node.serialNumber.toString();
                // const $this = this;
                // 重新点击删除节点
                if (!node.checked) {
                    this.cleanLinkAttr(node, false);
                    this.deletePoinobj(serialNumber);
                    return;
                }
                //假数据
                // this.secondDrawDot(node.id, node.iconName, node.fatherName);//测试

                //真实
                const $this = this;

                let dotColor = L.marker(node.position, {
                        icon: L.icon({
                            iconSize: [12,12],
                            iconUrl: "../../../static/dot/" + node.dotName,
                            // shadowUrl: "leaf-shadow.png",
                            // shadowSize:[41,41],
                            // className: tes.className,
                            // color: tes.roudColor,
                        }),
                    })
                    //图上标记点击事件
                    .on("click", function (e) {
                        console.log(e);
                        $this.map.panTo({
                            lon: e.latlng.lng,
                            lat: e.latlng.lat
                        });
                        $this.isResult = true;
                        $this.currentNode = node;
                        console.log($this.currentNode);
                    });

                let point = L.marker(node.position, {
                        icon: L.icon({
                            iconSize: node.iconSize,
                            iconUrl: "../../../static/images/" + node.iconName + ".png",
                            // shadowUrl: "leaf-shadow.png",
                            // shadowSize:[41,41],
                            // className: tes.className,
                            // color: tes.color,
                        }),
                    })
                    .addTo(this.map)
                    //图上标记点击事件
                    .on("click", function (e) {
                        console.log(e);
                        $this.map.panTo({
                            lon: e.latlng.lng,
                            lat: e.latlng.lat
                        });
                        $this.isResult = true;
                        $this.currentNode = node;
                        console.log($this.currentNode);
                    });
                let nodeDetail = {};
                nodeDetail["serialNumber"] = node.serialNumber;
                nodeDetail["position"] = node["position"];
                nodeDetail["point"] = point;
                nodeDetail["dot"] = dotColor;
                nodeDetail["名称"] = node.name;
                nodeDetail["地区"] = node.fatherName;
                nodeDetail["部队"] = node.troopsForm;
                nodeDetail["IconSize"] = node.iconSize;
                nodeDetail["Infomation"] = node;
                this.pointObj[node.serialNumber] = nodeDetail;
                this.showCanvas(node.iconName, nodeDetail);
                this.textInitReal(nodeDetail);

                // this.$store.dispatch("ajax", {
                //   url: "api/entityList/queryEntity",
                //   method: "post",
                //   data: { ids: [serialNumber] },
                //   succeed: (res) => {
                //     console.log(res);
                //     let nodeDetail = {};
                //     nodeDetail = res.rows[0];
                //     nodeDetail["serialNumber"] = res.rows[0]["编号"];
                //     nodeDetail["position"] = res.rows[0]["当前坐标"];
                //     if (nodeDetail["position"] === undefined) return;
                //     // 实例化圆点对象
                //     let point = $this.pointInit(nodeDetail);
                //     this.pointObj[serialNumber] = {
                //       migrationLayer: [],
                //       point: [],
                //     };

                //     // 初始化新闻的效果提示数组对象
                //     this.pointObj[serialNumber]["point"].push(point);
                //     this.pointObj[serialNumber]["attr"] = {
                //       position: nodeDetail.position,
                //       名称: nodeDetail["名称"],
                //       serialNumber: serialNumber,
                //     };
                //     // 实例化圆点文本对象
                //     $this.textInit(nodeDetail);

                //     // 实例化移动位置线条
                //     if (
                //       nodeDetail["前往坐标"] !== undefined ||
                //       nodeDetail["前往坐标名称"] !== undefined
                //     ) {
                //       $this.drawLine(nodeDetail);
                //     }
                //   },
                // });
            },
            // 点击节点处于地图中心
            zTreeClick(ps_dialog) {
                // zTreeClick(node, ps_dialog) {
                // console.log(ps_dialog);
                // let serialNumber =
                //   node.serialNumber === undefined ? node : node.serialNumber.toString();
                let nodePosition = node.position;
                this.map.panTo(nodePosition);
                if (nodePosition) {
                    setTimeout(() => {
                        let ps_dialogOffset = $(ps_dialog).offset();
                        if (ps_dialogOffset === undefined)
                            ps_dialogOffset = {
                                top: 0,
                                left: 0
                            };
                        nodePosition = [
                            nodePosition[0] - 28,
                            nodePosition[1] - (140 - ps_dialogOffset.top + 260),
                        ];
                        if (ps_dialogOffset !== undefined) this.map.panBy(nodePosition);
                    }, 400);
                }
                // const $this = this;
                // this.$store.dispatch("ajax", {
                //   url: "api/entityList/queryEntity",
                //   method: "post",
                //   data: { ids: [serialNumber] },
                //   succeed: (res) => {
                //     let nodePosition = res.rows[0]["当前坐标"]; /*,
                //                       mapCenter = $this.map.getCenter()*/
                //     $this.map.panTo(nodePosition);
                //     if (nodePosition) {
                //       setTimeout(() => {
                //         let ps_dialogOffset = $(ps_dialog).offset();
                //         if (ps_dialogOffset === undefined)
                //           ps_dialogOffset = { top: 200, left: 0 };
                //         nodePosition = [
                //           nodePosition[0] - 28,
                //           nodePosition[1] - (140 - ps_dialogOffset.top + 260),
                //         ];
                //         if (ps_dialogOffset !== undefined) $this.map.panBy(nodePosition);
                //       }, 400);
                //     }
                //   },
                // });
            },
            // 删除节点对象 地图上的图层
            deletePoinobj(serialNumber) {
                const layer = this.pointObj[serialNumber];
                if (layer !== undefined) {
                    if (layer.point !== null) {
                        this.map.removeLayer(layer.point);
                        // for (const k of layer.point) {
                        //   this.map.removeLayer(k);
                        // }
                    }
                    if (layer.text !== null) {
                        for (const k of layer.text) {
                            this.map.removeLayer(k);
                        }
                    }
                    this.map.closePopup(this.publicLayer[serialNumber]); //关闭详情的弹框
                    this.closeEcharts(false);
                    // 删除半径
                    // if (this.pointObj[serialNumber].range !== undefined)
                    //   this.pointObj[serialNumber].range.val.remove();
                    // // 删除新新闻的效果提示
                    // for (const k of this.pointObj[serialNumber]["migrationLayer"]) {
                    //   k.destroy();
                    // }
                    delete this.pointObj[serialNumber];
                    delete this.publicLayer[serialNumber];
                }
            },
            // 到达线条绘制事件
            drawLine(node) {
                let editData = node;
                const $this = this;
                if (this.pointObj[editData["编号"]]) {
                    const serialNumber = editData["编号"];
                    const startP = $this.pointObj[editData["编号"]].attr["position"];
                    const endP = editData["前往坐标"];

                    // 更新点坐标与文本坐标
                    $this.pointObj[editData["编号"]].attr["position"] = endP;
                    const point = $this.pointInit($this.pointObj[serialNumber]["attr"]);
                    this.pointObj[serialNumber]["point"].push(point);
                    $this.textInit($this.pointObj[serialNumber]["attr"]);

                    // 绘制线对象
                    const latlngs = [{
                        from: [startP[1], startP[0]],
                        to: [endP[1], endP[0]],
                        labels: ["", editData["到达位置"]],
                        color: "#4afeff",
                    }, ];
                    const migrationLayer = new L.migrationLayer({
                        map: this.map,
                        data: latlngs,
                        pulseRadius: 30,
                        pulseBorderWidth: 3,
                        arcWidth: 1,
                        arcLabel: true,
                        arcLabelFont: "10px sans-serif",
                    });
                    migrationLayer.addTo(this.map);
                    if (this.pointObj[serialNumber] !== undefined)
                        this.pointObj[serialNumber]["migrationLayer"].push(migrationLayer);

                    const pointChild = this.pointObj[serialNumber]["point"];
                    for (let i = 0; i < pointChild.length - 1; i++) {
                        // $(pointChild[i]._icon).addClass('renewal-bgc');
                    }

                    /*if (editData['关系类型性质'] !== "4") {
                                    for (const k of this.pointObj[serialNumber]['point']) {
                                        $(k).addClass('renewal');
                                    }
                                    // $(this.pointObj[serialNumber]['point']._icon).addClass('renewal');
                                }*/

                    /*                        let text_icon = $(this.pointObj[serialNumber].text._icon);
                                                        text_icon.addClass('renewal-next');
                                                        text_icon.find('.showNewData').html(`<li>${editData['关系名称']}${editData[editData['关系名称'] + '位置']}</li>`);*/
                }
            },
            hoverMove(name) {
                this.$refs.countryListObj.hoverMove(name);
            },
            paintBangs() {
                this.abilityAnalysisShow = true;
                this.removeLayer();
                this.findChild(this.rightCheckedNode);
                this.treeModal = false;
            },
            checkPosition(val) {
                if (val.position) {
                    if (!this.point.length) {
                        this.point[this.point.length] = {
                            val: L.circle(val.position, 20000, {
                                    color: "#1195fe",
                                    opacity: 0,
                                    fillColor: "#1195fe",
                                    fillOpacity: 0.3,
                                })
                                .addTo(this.map)
                                .bindPopup("<h1>探测半径</h1>"),
                            position: val.position,
                        };
                    } else {
                        const arr = [];
                        this.point.map((item) => {
                            arr.push(item.position);
                        });
                        if (arr.indexOf(val.position) === -1) {
                            this.point[this.point.length] = {
                                val: L.circle(val.position, 20000, {
                                        color: "#1195fe",
                                        opacity: 0,
                                        fillColor: "#1195fe",
                                        fillOpacity: 0.3,
                                    })
                                    .addTo(this.map)
                                    .bindPopup("<h1>探测半径</h1>"),
                                position: val.position,
                            };
                        }
                    }
                }
            },
            findChild(CheckedNode) {
                if (CheckedNode.position) {
                    this.checkPosition(CheckedNode);
                }
                if (CheckedNode.children) {
                    CheckedNode.children.map((val) => {
                        this.findChild(val);
                    });
                }
            },
            removeLayer() {
                this.point.map((layer) => {
                    this.map.removeLayer(layer.val);
                });
                this.point = [];
                this.pointRange.map((layer) => {
                    this.map.removeLayer(layer);
                });
            },
            openWindow(url) {
                window.open(window.location.href + url);
                this.rightModalShow = false;
            },
            addMapEvents() {
                let _this = this;
                //右键事件
                this.map.on("contextmenu", (e) => {
                    console.log("此处坐标：", e, e.latlng.lat + "," + e.latlng.lng);

                    // const $this = this;
                    // let editData = {"当前节点编号":"10410","关系描述":"到达","发生时间":"2018-09-13 08:46:11","当前节点名称":"埃塞克斯号两栖攻击舰","position":[12,68],"关系类型性质":"3","到达位置":"中东"};
                    // $this.drawLine(editData);
                });
                this.map.on("click", () => {
                    this.hideRightModal();
                });
                this.map.on("dragstart", () => {
                    this.hideRightModal();
                });
                this.map.on("zoomstart", () => {
                    this.hideRightModal();
                });
                this.map.on('zoomend ', function (e) {
                    _this.zoomenleevel();
                });
                let mapCenterObj;
                this.map.on("popupopen", (e) => {
                    // console.log(e)
                    const state = e.popup._container;
                    if (e.type === "popupopen" && $(state).find(".map_item").length === 0) {
                        let ps_dialog = $(e.popup._container).find(".ps_dialog"),
                            data_num = $(ps_dialog).find(".detail_html").attr("data-num"),
                            bodyWidth = $(document.body).width() / 2,
                            ps_dialogOffset = $(ps_dialog).offset();
                        if (
                            (ps_dialogOffset !== undefined && ps_dialogOffset.top < 280) ||
                            ps_dialogOffset.left < bodyWidth - 150 ||
                            ps_dialogOffset.left > bodyWidth + 150
                        ) {
                            this.zTreeClick(ps_dialog);
                            // this.zTreeClick(data_num, ps_dialog);
                        }
                        // 关闭其他弹窗
                        if (this.pointObj.length == 0) {
                            return;
                        }
                        for (const i in this.pointObj) {
                            const layer = this.pointObj[i];
                            if (layer.serialNumber !== data_num) {
                                for (const k of layer.text) {
                                    k.closePopup();
                                }
                            }
                        }
                    }
                });
            },
            //缩放等级 切换图标
            zoomenleevel() {
                let zoom = this.map.getZoom();
                if (zoom > 4) {
                    for (const i in this.pointObj) {
                        this.map.addLayer(this.pointObj[i].point);
                        this.map.addLayer(this.pointObj[i].text[0]);
                    }
                } else if (zoom <= 4) {
                    for (const i in this.pointObj) {
                        this.map.removeLayer(this.pointObj[i].point);
                        this.map.removeLayer(this.pointObj[i].text[0]);
                        this.map.addLayer(this.pointObj[i].dot);
                    }
                }
            },
            webSocketServer() {
                this.webSocket = new WebSocket(
                    this.env === "production" ?
                    "ws://" + location.hostname + ":" + location.port + "/websocket" :
                    "ws://192.168.1.150:9000/websocket"
                );
                // 连通之后的回调事件
                this.webSocket.onopen = () => {
                    // webSocket.send('连接创建');
                    console.log("连接创建...");
                };

                // 接收后台服务端的消息
                this.webSocket.onmessage = (evt) => {
                    const $this = this;
                    const redata = JSON.parse(evt.data);

                    if (redata.type && redata.type === "targetEvent") {
                        console.log(evt);
                        $this.drawLine(redata.data);
                    }
                };

                // 连接关闭的回调事件
                this.webSocket.onclose = () => {
                    console.log("连接已关闭...");
                };
            },
            drawMenu(serialNumber) {
                this.rightModalShow = true;
                this.treeModal = false;
                this.abilityNum = serialNumber;
                let e = window.event;
                let scrollX =
                    document.documentElement.scrollLeft || document.body.scrollLeft; //分别兼容ie和chrome
                let scrollY =
                    document.documentElement.scrollTop || document.body.scrollTop;
                let x = e.pageX || e.clientX + scrollX; //兼容火狐和其他浏览器
                let y = e.pageY || e.clientY + scrollY;
                let position = [{
                        x: "28px",
                        y: "33px"
                    },
                    {
                        x: "125px",
                        y: "33px"
                    },
                    {
                        x: "125px",
                        y: "120px"
                    },
                    {
                        x: "28px",
                        y: "120px"
                    },
                ];
                setTimeout(() => {
                    $("#mapModal").css({
                        left: x - 100 + "px",
                        top: y - 100 + "px"
                    });
                    $("#ability_analysis").draggable({
                        handle: ".ability_tlt"
                    });
                    for (let i = 0; i < position.length; i++) {
                        $("#mapModal>div:nth-child(" + (i + 1) + ")").animate({
                            left: position[i].x,
                            top: position[i].y,
                            opacity: "1",
                            height: "50px",
                            width: "50px",
                        });
                    }
                }, 0);
            },
            closeAbilityAnalysis() {
                this.abilityAnalysisShow = false;
                this.removeLayer();
            },
            closeActiveAnalysis() {
                this.actionAnalysisShow = false;
            },
            actionAnalysis() {
                this.rightModalShow = false;
                this.actionAnalysisShow = !this.actionAnalysisShow;
            },
            hideRightModal() {
                this.rightModalShow = false;
                this.treeModal = false;
            },
            closeModal(type) {
                switch (type) {
                    case 1:
                        this.btns.list.open = false;
                        break;
                    case 2:
                        this.btns.events.open = false;
                        break;
                    case 3:
                        this.btns.status.open = false;
                        break;
                    default:
                        break;
                }
            },
            showTreeModal(node) {
                this.rightCheckedNode = node;
                if (node && node.checked) {
                    this.treeModal = true;
                    let e = window.event;
                    let scrollX =
                        document.documentElement.scrollLeft || document.body.scrollLeft; //分别兼容ie和chrome
                    let scrollY =
                        document.documentElement.scrollTop || document.body.scrollTop;
                    let x = e.pageX || e.clientX + scrollX; //兼容火狐和其他浏览器
                    let y = e.pageY || e.clientY + scrollY;
                    setTimeout(() => {
                        $("#treeModal").css({
                            left: x + 20 + "px",
                            top: y + "px"
                        });
                    }, 0);
                } else {
                    this.treeModal = false;
                }
            },
        },
    };
</script>
<style lang="less">
    .ps-dialog-body {
        overflow: none;
    }
</style>